<template>
  <div class="about">
    <h1>关于我们</h1>
    <section class="team">
      <div class="team-member">
        <img src="https://picsum.photos/200/200?random=4" alt="Team Member 1">
        <h2>张三</h2>
        <p>前端架构师</p>
      </div>
      <div class="team-member">
        <img src="https://picsum.photos/200/200?random=5" alt="Team Member 2">
        <h2>李四</h2>
        <p>UI/UX设计师</p>
      </div>
      <div class="team-member">
        <img src="https://picsum.photos/200/200?random=6" alt="Team Member 3">
        <h2>王五</h2>
        <p>全栈开发者</p>
      </div>
    </section>
    
    <section class="mission">
      <h2>我们的使命</h2>
      <p>致力于创建高质量、易维护的Web应用，通过技术创新提升用户体验。</p>
      <p>我们相信简洁的设计和优雅的代码能够创造出令人愉悦的产品。</p>
    </section>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style scoped>
.about {
  max-width: 1200px;
  margin: 0 auto;
}

.about h1 {
  text-align: center;
  margin-bottom: 3rem;
}

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.team-member {
  text-align: center;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.team-member img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.mission {
  text-align: center;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.mission h2 {
  margin-bottom: 1.5rem;
}

.mission p {
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .team {
    grid-template-columns: 1fr;
  }
}
</style>